(function(){
    var $box = $('#box');
    var $mask = $('.mask');
    var $images = $('#box>li>img');
    
    function setMouseEvent($images,$mask,$box){//参数为图片，大图div，外盒子
        $images.on('mouseover',function(e){
            e = e || window.event;//事件e的兼容处理
            
            console.log(e.target);
            $mask.children('img').attr('src',$(e.target).attr('src'));
            
            $mask.stop().show(500);
         }).on('mouseout',function(e){
             e = e || window.event;//事件e的兼容处理
             $mask.stop().hide(500);
            //  $mask.css('display','none');
         }).on('mousemove',function(e){
            e = e || window.event;//事件e的兼容处理
            var left = e.clientX - $box.offset().left + 10;
            var top = e.clientY - $box.offset().top + 10;
            $mask.css({
                left:left,
                top:top
            })
         })
    }
    
    setMouseEvent($images,$mask,$box);
     
})();